<!DOCTYPE html>
<html>
<head>
<title>Circuit Diagram Fig. 3.36</title>
</head>
<body>
<canvas id="circuitCanvas" width="650" height="450" style="border:1px solid #d3d3d3;"></canvas>
<script>
const canvas = document.getElementById('circuitCanvas');
const ctx = canvas.getContext('2d');

// --- Style Settings ---
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 3;
// A font that resembles the hand-drawn style in the textbook image.
ctx.font = "bold 24px 'Comic Sans MS', cursive, sans-serif";
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// --- Drawing Helper Functions ---

function drawResistor(x, y, width = 60, height = 15, peaks = 5) {
    const dx = width / (2 * peaks);
    ctx.beginPath();
    ctx.moveTo(x, y);
    for (let i = 0; i < peaks; i++) {
        ctx.lineTo(x + (2 * i + 1) * dx, y - height);
        ctx.lineTo(x + (2 * i + 2) * dx, y);
    }
    ctx.stroke();
}

function drawVerticalResistor(x, y1, y2, width = 15, peaks = 7) {
    const height = y2 - y1;
    const dy = height / (2 * peaks);
    ctx.beginPath();
    ctx.moveTo(x, y1);
    for (let i = 0; i < peaks; i++) {
        ctx.lineTo(x - width, y1 + (2 * i + 1) * dy);
        ctx.lineTo(x, y1 + (2 * i + 2) * dy);
    }
    ctx.stroke();
}

function drawCapacitor(x, y, plateWidth = 10, plateHeight = 30) {
    ctx.beginPath();
    // Left plate
    ctx.moveTo(x, y - plateHeight / 2);
    ctx.lineTo(x, y + plateHeight / 2);
    // Right plate
    ctx.moveTo(x + plateWidth, y - plateHeight / 2);
    ctx.lineTo(x + plateWidth, y + plateHeight / 2);
    ctx.stroke();
}

function drawInductor(x, y1, y2, loops = 5, radius = 12) {
    const height = y2 - y1;
    const loopHeight = height / loops;
    ctx.beginPath();
    // The path is continuous, made of arcs
    for (let i = 0; i < loops; i++) {
        ctx.arc(x, y1 + i * loopHeight + loopHeight / 2, radius, Math.PI / 2, 3 * Math.PI / 2, true);
    }
    ctx.stroke();
}

function drawACSource(x, y, radius = 30) {
    // Circle
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.stroke();
    // Sine wave inside
    ctx.beginPath();
    const sineWidth = radius * 1.4;
    const sineHeight = radius * 0.7;
    ctx.moveTo(x - sineWidth / 2, y);
    ctx.quadraticCurveTo(x - sineWidth / 4, y - sineHeight, x, y);
    ctx.quadraticCurveTo(x + sineWidth / 4, y + sineHeight, x + sineWidth / 2, y);
    ctx.stroke();
}

function drawArrow(fromX, fromY, toX, toY, headLength = 10) {
    const dx = toX - fromX;
    const dy = toY - fromY;
    const angle = Math.atan2(dy, dx);
    ctx.beginPath();
    ctx.moveTo(fromX, fromY);
    ctx.lineTo(toX, toY);
    ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(toX, toY);
    ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
    ctx.stroke();
}

function drawDot(x, y, radius = 4) {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.fill();
}

// --- Main Drawing Logic ---

// --- Circuit Coordinates ---
const p_left = 100;
const p_right = 350;
const s_left = 400;
const s_right = 550;
const y_top = 100;
const y_bottom = 350;
const y_mid = (y_top + y_bottom) / 2;

// --- Primary Circuit (Left Loop) ---
const sourceX = p_left;
const sourceY = y_mid;
const sourceRadius = 30;
drawACSource(sourceX, sourceY, sourceRadius);
ctx.fillText("V\u2080sin\u03C9t", sourceX + 85, sourceY);

// Wires for Primary Circuit
ctx.beginPath();
ctx.moveTo(sourceX, sourceY + sourceRadius);
ctx.lineTo(sourceX, y_bottom); 
ctx.lineTo(p_right, y_bottom);
ctx.moveTo(p_right, y_top); 
ctx.lineTo(310, y_top); 
ctx.moveTo(280, y_top); 
ctx.lineTo(240, y_top);
ctx.moveTo(180, y_top);
ctx.lineTo(sourceX, y_top);
ctx.lineTo(sourceX, sourceY - sourceRadius);
ctx.stroke();

// Resistor R1
const r1_x = 180;
const r1_width = 60;
drawResistor(r1_x, y_top, r1_width, 10);
ctx.fillText("R\u2081", r1_x + r1_width / 2, y_top - 30);

// Capacitor C
const cap_x_start = 280;
drawCapacitor(cap_x_start, y_top);
ctx.fillText("C", cap_x_start + 5, y_top - 30);

// Primary Inductor L
ctx.beginPath();
ctx.moveTo(p_right, y_top);
ctx.lineTo(p_right, y_bottom);
ctx.stroke();
drawInductor(p_right, y_top, y_bottom);
ctx.fillText("L", p_right - 40, y_mid);
drawDot(p_right, y_top + 20);

// Current I1
const i1_y = y_bottom + 30;
drawArrow(200, y_bottom, 240, y_bottom);
ctx.fillText("I\u2081", 220, i1_y);

// --- Secondary Circuit (Right Loop) ---

// Wires for Secondary Circuit
ctx.beginPath();
ctx.moveTo(s_left, y_top);
ctx.lineTo(s_left, y_bottom); 
ctx.lineTo(s_right, y_bottom);
ctx.lineTo(s_right, y_top);
ctx.lineTo(s_left, y_top);
ctx.stroke();

// Secondary Inductor L
drawInductor(s_left, y_top, y_bottom);
ctx.fillText("L", s_left - 40, y_mid);
drawDot(s_left, y_top + 20);

// Resistor R2
drawVerticalResistor(s_right, y_top, y_bottom);
ctx.fillText("R\u2082", s_right + 30, y_mid);

// Current I2
const i2_y = y_top - 30;
drawArrow(450, y_top, 490, y_top);
ctx.fillText("I\u2082", 470, i2_y);

// --- Mutual Inductance M ---
const m_x = (p_right + s_left) / 2;
const m_y = y_top + 60;
ctx.beginPath();
ctx.moveTo(p_right, m_y);
ctx.bezierCurveTo(p_right + 15, m_y - 20, s_left - 15, m_y + 20, s_left, m_y);
ctx.stroke();
ctx.fillText("M", m_x, m_y - 30);

// --- Figure Label ---
ctx.fillText("Fig. 3.36", canvas.width / 2 - 50, canvas.height - 30);

</script>
</body>
</html>